<template>
    <div class="index">
        <div class="top">
            <el-button @click="form = {};show = true" type="primary">新增精选</el-button>
        </div>
        <el-table
        v-if="list"
        stripe
        :data="list"
        style="width: 100%">
            
            <el-table-column
                v-if="prop.showList"
                type="expand">
                <template slot-scope="props">
                    
                </template>
            </el-table-column>

            <el-table-column
                :prop="prop.homeId"
                label="ID">
            </el-table-column>
            
            <el-table-column
                :prop="prop.title"
                label="标题">
            </el-table-column>

            <el-table-column
                :prop="prop.type"
                label="类型">
            </el-table-column>

            <el-table-column
                prop="secondNum"
                v-if="list.length > 0 && list[0].secondId == 0"
                label="子分类数量">
            </el-table-column>

            <el-table-column
                width="500px"
                label="操作">
                <template slot-scope="scope">
                    <div>
                        <el-button
                        v-if="scope.row.secondId == 0"
                        @click="$router.push('/indexDetail?id=' + scope.row.homeId)">详情</el-button>

                        <el-button
                        type="primary"
                        @click="updateIndex(scope.row)">编辑</el-button>

                        <el-button
                        type="primary"
                        @click="refresh(scope.row.homeId)" v-if="scope.row.secondId == 0">更新</el-button>

                        <el-button
                        :type="scope.row.status == 0 ? 'warning' : 'primary'"
                        @click="handleHide(scope.$index, scope.row)">
                            {{scope.row.status == 0 ? '禁用' : '启用'}}
                        </el-button>

                        <el-popconfirm
                        style="margin-left: 10px;"
                        icon="el-icon-info"
                        icon-color="red"
                        @confirm="handleDetele(scope.$index, scope.row)"
                        title="确定删除吗？"
                        >
                            <el-button slot="reference" type="danger">删除</el-button>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <addIndex v-model="show" @success="getDirectory" :form="form"/>
        <addSelect />
    </div>
</template>

<script>
    import { refreshIndexDetail }  from '@/api/home'
    import addIndex from '@/components/index/addIndex.vue'
    import addSelect from '../select/addSelect.vue'
    export default {
        props : {
            list : {
                type : Array,
                default : []
            },
            prop : {
                type : Object,
                default : {
                    homeId : 'homeId',
                    type : 'type',
                    title : 'title',
                    showList : false
                }
            }
        },
        components : {
            addIndex,
            addSelect
        },
        data() {
            return {
                show : false,
                form : {}
            }
        },
        created(){
        },
        methods : {
            refresh(id){
                refreshIndexDetail(id).then(res => {
                    if(res.code == 200){
                        this.$message.success('操作成功')
                    }
                })
            },
            getDirectory(){
                this.$emit('success')
            },
            handleHide(){},
            handleDetele(){},
            updateIndex(data){
                this.show = true
                this.form = this.prop.homeId.split('.').length == 1 ? data : data[this.prop.homeId.split('.')[0]]
            }
        }
    }
</script>

<style lang="less" scoped>
.index{
    .top{
        padding: 10px;
    }
}
</style>